<template>
  <div id="left2" style="width: 100%;height: 100%;"></div>
</template>

<script>
import { Pie } from '@antv/g2plot';
import {get} from '@/utils/request';
  export default {
    data(){
      return{
        pieData:[]
      }

    },
    async mounted(){
    
      await this.getDevData()
      await this.initlift2()
    },
    methods:{
      //创建图表
      initlift2(){
      
      const piePlot = new Pie('left2', {
        appendPadding: 10,
        data:this.pieData,
        angleField: 'value',
        colorField: 'type',
        radius: 0.9,
        label: {
          type: 'inner',
          offset: '-30%',
          content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          style: {
          fontSize: 14,
          textAlign: 'center',
          },
        },
      interactions: [{ type: 'element-active' }],
});
piePlot.render();
},
async getDevData(){
  let res=await get('/dashboard/queryDeviceOnlineNumber')
  //console.log(res);
  this.pieData=res.data
}

    },
    
  }
</script>


<style scoped>

</style>